<template>
	<view class="apply-pages fill-base">
		<view class="flex-between pt-lg pb-lg pl-lg pr-lg b-1px-b">
			<view class="item-text">手机</view>
			<text style="color: #999;">{{ mobile }}</text>
		</view>
		<view class="flex-between pt-lg pb-lg pl-lg pr-lg b-1px-b">
			<view class="item-text">ID</view>
			<text style="color: #999;">{{ id }}</text>
		</view>
		<view class="flex-between pt-lg pb-lg pl-lg pr-lg b-1px-b">
			<view class="item-text">头像</view>
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="width: 100px; padding: 0;">
				<image class="avatar" :src="avatar" mode="widthFix" style="width: 100px;"></image>
			</button>
		</view>
		<view class="flex-between pt-lg pb-lg pl-lg pr-lg b-1px-b">
			<view class="item-text">昵称</view>
			<input v-model="nickname" @blur="nickget" type="nickname" class="item-input" maxlength="20"
				placeholder="请输入" />
		</view>
		
		<view class="space-max-footer"></view>
		
		<fix-bottom-button @confirm="submit" :text="textArr" bgColor="#fff"></fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import $api from '@/api/index.js';
	export default {
		components: {
		},
		data() {
			return {
				mobile:'',
				avatar:'',
				nickname:'',
				id:'',
				isLoad: false,
				textArr: [{
					text: '保存',
					type: 'confirm'
				}],
				isOpen: 0,
				life_photo: [], // 生活照
				aincomes: [
					{ title: '10万以下' }, 
					{ title: '10万-30万' },
					{ title: '30万-50万' }, 
					{ title: '50万以上' }
				],
				rises: [],
				weights: [],
				figures: [
					{ title: '丰满' }, 
					{ title: '苗条' },
					{ title: '肥胖' }, 
					{ title: '其他' }
				],
				emostates: [
					{ title: '单身' }, 
					{ title: '已婚' },
					{ title: '老师' }
				],
				characters: [],
				rappoins: [
					{ title: '不接受' }, 
					{ title: '接受' },
					{ title: '看情况' }
				],
				coinChangeindex: 0,
				user_info: {},
				showmobile:'',
				classList: [
					{
						id: 6,
						name: "交友",
						image: "/static/main/01.png",
						path: "/service/pages/user-list?id=6",
					},
					{
						id: 2,
						name: "心灵",
						image: "/static/main/02.png",
						path: "/service/pages/user-list-other?id=2",
					},
					{
						id: 273,
						name: "疗愈",
						image: "/static/main/03.png",
						path: "/service/pages/user-list-other?id=273",
					},
					{
						id: 252,
						name: "娱乐",
						image: "/static/main/04.png",
						path: "/service/pages/user-list-other?id=252",
					},
					{
						id: 1,
						name: "课堂",
						image: "/static/main/05.png",
						path: "/service/pages/user-list-other?id=1",
					},
					{
						id: 14,
						name: "美食",
						image: "/static/main/06.png",
						path: "/service/pages/user-list-other?id=14",
					},
					{
						id: 7,
						name: "养生",
						image: "/static/main/07.png",
						path: "/service/pages/user-list-other?id=7",
					},
					{
						id: 3,
						name: "医美",
						image: "/static/main/08.png",
						path: "/service/pages/user-list-other?id=3",
					},
					{
						id: 16,
						name: "休闲",
						image: "/static/main/09.png",
						path: "/service/pages/user-list-other?id=16",
					},
					{
						id: 11,
						name: "食疗",
						image: "/static/main/10.png",
						path: "/service/pages/user-list-other?id=11",
					},
					{
						id: 10,
						name: "家政",
						image: "/static/main/11.png",
						path: "/service/pages/user-list-other?id=10",
					},
					{
						id: 17,
						name: "自媒体",
						image: "/static/main/12.png",
						path: "/service/pages/user-list-other?id=17",
					},
					{
						id: 15,
						name: "创业",
						image: "/static/main/13.png",
						path: "/service/pages/user-list-other?id=15",
					},
					{
						id: 287,
						name: "健身",
						image: "/static/main/14.png",
						path: "/service/pages/user-list-other?id=287",
					},
					{
						id: 253,
						name: "电影",
						image: "/static/main/15.png",
						path: "/service/pages/user-list-other?id=253",
					},
					{
						id: 284,
						name: "汽车",
						image: "/static/main/16.png",
						path: "/service/pages/user-list-other?id=284",
					},
					{
						id: 58,
						name: "科技",
						image: "/static/main/17.png",
						path: "/service/pages/user-list-other?id=58",
					},
					{
						id: 13,
						name: "旅游",
						image: "/static/main/18.png",
						path: "/service/pages/user-list-other?id=13",
					},
					{
						id: 286,
						name: "首饰",
						image: "/static/main/19.png",
						path: "/service/pages/user-list-other?id=286",
					},
					{
						id: 5,
						name: "酒店",
						image: "/static/main/21.png",
						path: "/service/pages/user-list-other?id=5",
					},
					{
						id: 289,
						name: "减肥",
						image: "/static/main/20.png",
						path: "/service/pages/user-list-other?id=289",
					},
					{
						id: 285,
						name: "房产",
						image: "/static/main/22.png",
						path: "/service/pages/user-list-other?id=285",
					},
					{
						id: 12,
						name: "维修服务",
						image: "/static/main/23.png",
						path: "/service/pages/user-list-other?id=12",
					},
					{
						id: 288,
						name: "康复理疗",
						image: "/static/main/24.png",
						path: "/service/pages/user-list-other?id=288",
					},
					{
						id: 18,
						name: "其它",
						image: "/static/main/25.png",
						path: "/service/pages/user-list-other?id=18",
					},
				]
				
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		async onLoad(options) {
			console.log(options)
			this.id=options.id
			this.nickname=options.nickname
			this.mobile=options.mobile
			this.avatar=options.avatar
			this.initIndex()
		},
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateUserItem']),
			async initIndex() {
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				
				let param = {
					touid: this.userInfo.id,
				}
				this.user_info = await $api.user.touserInfo(param)
				this.showmobile = this.user_info.mobile;
				// this.user_info = this.$util.deepCopy(this.userInfo)
				
				this.user_info.avatar = [{
					path: this.user_info.avatar
				}]
				this.user_info.master_map = [{
					path: this.user_info.master_map
				}]
				// debugger
				if(this.user_info.public_type == 0){
					this.isOpen = 0
				} else {
					this.isOpen = 1
				}
				// debugger
				this.life_photo = []
				for (var i = 0; i < this.user_info.life_photo.length; i++) {
					var item = this.user_info.life_photo[i]
					this.life_photo.push({path: item.imageurl})
				}
				
				// 博爱、宽容 豁达、开放、公正 有胆识、有气魄、精力旺盛 自信 力量 凝聚力，让人信任、乐于交往  感召力 阳光
				// 尊重人  智慧 目光敏锐   慷慨  言必行 行必果 光明磊落 襟怀坦白
				if(this.user_info.sex == 1){
					this.characters.push({title: '博爱'})
					this.characters.push({title: '宽容'})
					this.characters.push({title: '豁达'})
					this.characters.push({title: '开放'})
					this.characters.push({title: '公正'})
					this.characters.push({title: '有胆识'})
					this.characters.push({title: '有气魄'})
					this.characters.push({title: '精力旺盛'})
					this.characters.push({title: '自信'})
					this.characters.push({title: '力量'})
					this.characters.push({title: '凝聚力'})
					this.characters.push({title: '让人信任'})
					this.characters.push({title: '乐于交往'})
					this.characters.push({title: '感召力'})
					this.characters.push({title: '阳光'})
				} else {
					this.characters.push({title: '尊重人'})
					this.characters.push({title: '智慧'})
					this.characters.push({title: '目光敏锐'})
					this.characters.push({title: '慷慨'})
					this.characters.push({title: '言必行'})
					this.characters.push({title: '行必果'})
					this.characters.push({title: '光明磊落'})
					this.characters.push({title: '襟怀坦白'})
				}
				for (var i = 140; i < 201; i++) {
					this.rises.push({title: i + ""});
				}
				for (var i = 40; i < 151; i++) {
					this.weights.push({title: i + ""});
				}
			},
			nickget(e){
				this.nickname = e.detail.value
			},
			async onChooseAvatar(e){
				console.log('=================111')
				console.log(e.detail)
				console.log(e)
				
				let pathInfo = await this.$api.base.uploadFile({
					filePath: e.detail.avatarUrl,
					formData: {
						type: 'picture'
					}
				})
				
				this.avatar = pathInfo.attachment_path
				
				// this.avatar = path
			},
			changeOpen() {
				if(this.isOpen == 0){
					this.isOpen = 1
					this.showmobile = this.user_info.mobile
				} else {
					this.isOpen = 0
					let originnum = this.user_info.mobile
					this.showmobile = originnum.substr(0,4)+'**** ' +originnum.substr(9,4)
				}
			},
			goDetail(index, key) {
				let {
					siteroot
				} = siteInfo
				let {
					url
				} = this[key][index]
				if (key == 'infoList') {
					// #ifdef MP-WEIXIN
					this.$util.goUrl({
						url: `/user/pages/info?type=${url}`
					})
					// #endif
					// #ifndef MP-WEIXIN

					let href = siteroot.split('index.php')[0]
					let page = url == 1 ? 'protocol' : 'information'
					url = `${href}${page}.html`
					this.$util.goUrl({
						url,
						openType: 'web'
					})
					// #endif
				}
			},
			// 选择地区
			async toChooseLocation(e) {
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				let [, {
					address = '',
					longitude,
					latitude
				}] = await uni.chooseLocation();
				if (!address) return
				this.user_info.location = address
				this.user_info.lng = longitude
				this.user_info.lat = latitude
			},
			publicTypeChange(index) {
				// debugger
				if(this.isOpen == 1){
					this.user_info.public_type = index
				}
			},
			sexChange(index) {
					this.user_info.sex = index
			},
			birthdayChange(e, val) {
				this.user_info.birthday = e.target.value
			},
			introduceChange(e, val) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.user_info.introduce = this.classList[e.target.value].name
			},
			aincomeChange(e, val) {
				this.user_info.aincome = this.aincomes[e.target.value].title
			},
			riseChange(e, val) {
				this.user_info.rise = this.rises[e.target.value].title
			},
			weightChange(e, val) {
				this.user_info.weight = this.weights[e.target.value].title
			},
			figureChange(e, val) {
				this.user_info.figure = this.figures[e.target.value].title
			},
			emostateChange(e, val) {
				this.user_info.emostate = this.emostates[e.target.value].title
			},
			characterChange(e, val) {
				this.user_info.character = this.characters[e.target.value].title
			},
			rappoinChange(e, val) {
				this.user_info.rappoin = this.rappoins[e.target.value].title
			},
			// {id: 12, name: "其他", list_order: 9999, colour: "#318742", colour2: "#f08bcd", ifcheck: "1"}
			handerHobbyChange(index, ifcheck) {
				
				if(ifcheck == 0){
					var number = 0
					this.user_info.hobby.map((item, index) => {
						if(item.ifcheck == 1){
							number += 1
						}
					})
					if(number > 2){
						number += 1
						uni.showModal({
							title: '提示',
									showCancel: false,
							content: '最多选择三条数据'
						})
					} else {
						this.user_info.hobby[index].ifcheck = this.user_info.hobby[index].ifcheck == 0 ? 1 : 0
					}
				} else {
					this.user_info.hobby[index].ifcheck = 0
				}
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				console.log(imagelist, e, "=====imgUpload")
				this.user_info[imgtype] = imagelist;
			},
			imgUpload2(e) {
				let {
					imagelist,
					imgtype,
					index
				} = e;
				console.log(imagelist, e, "=====imgUpload22")
				this.life_photo = imagelist
				var lifePhoto = []
				for (var i = 0; i < imagelist.length; i++) {
					var item = imagelist[i]
					lifePhoto.push({imageurl: item.path})
				}
				this.updatePhoto(lifePhoto)
			},
			async updatePhoto(lifePhoto) {
				let param = {
					imageurl: lifePhoto,
				}
				this.$util.showLoading()
				try {
					await this.$api.user.updatePhoto(param)
					this.$util.hideAll()
				} catch (e) {
					this.$util.hideAll()
				}
			},
			async submit() {
				// avatar master_map
				// 自我介绍self_introduction           公开手机号类型public_type
				// 'user_nicename', 'sex', 'signature', 'birthday', 'location', 
				// 'freestart', 'freeend', 'videocoin', 'voicecoin', 'resumetype', 
				// 'occupation', 'introduce', 'aincome', 'rise', 'weight', 'figure', 
				// 'emostate', 'character', 'rappoin'
				// let param = this.$util.deepCopy(this.user_info)
				// param.avatar = this.user_info.avatar[0].path
				// param.master_map = this.user_info.master_map[0].path
				
				// param.labels = ''
				
				// // {id: 12, name: "其他", list_order: 9999, colour: "#318742", colour2: "#f08bcd", ifcheck: "1"}
				// this.user_info.hobby.map((item, index) => {
				// 	// debugger
				// 	if(item.ifcheck == 1){
				// 		param.labels += item.id + ','
				// 	}
				// })
				let param = {
					avatar:this.avatar,
					user_nicename:this.nickname
				}
				
				console.log(param)
				
				if(param.user_nicename == "")
				{
					uni.showToast({
						title:'昵称不能为空'
					})
					return
				}
				
				this.$util.showLoading()
				try {
					await this.$api.user.updateFields(param)
					uni.showToast({
						title: '保存成功',
						duration: 2600
					});
					 uni.redirectTo({
					 	url:'/pages/mine'
					 })
					
				} catch (e) {
					this.$util.hideAll()
				}
			}

		}
	}
</script>

<style lang="scss">
	.mine-pages-setting {
		.iconfont {
			color: #fff
		}
		
	}
	.item-box {
		box-sizing: border-box;
		padding: 10px 6px;
		width: 100%;
		height: 84rpx;
		float: left;
		display: flex;
		flex-wrap: wrap; //自动换行
		background-color: #fff;
		.box-btn {
			margin-right: 5rpx;
			margin-bottom: 10rpx;
			width: 100rpx;
			height: 62rpx;
			display: flex;
			align-items: center;
			background-color: #e4e4e4;
			border-radius: 42rpx;
			line-height: 1.5;
			border-color: #000;
			border-width: 2rpx;
			text-align: left;
			color: #333;
		}
		.box-btn2 {
			margin-right: 5rpx;
			margin-bottom: 10rpx;
			width: 100rpx;
			height: 62rpx;
			display: flex;
			align-items: center;
			background-color: #bccfde;
			border-radius: 42rpx;
			line-height: 1.5;
			border-color: #000;
			border-width: 2rpx;
			text-align: left;
			color: #333;
		}
	}
</style>
